<!--  -->
<template>
  <div class="user">
    <div class="h50">
        <my-tab-bar
          title="我的"
          left-arrow
          @click = "onClickLeft"
        ></my-tab-bar>
      </div>
    <div class="userImage">
        <van-image
          round
          width="7rem"
          height="7rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
    </div>
    <div class="userInfo">
        <van-cell-group>
          <van-cell title="昵称" :value="user.nickName" />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="用户名" :value="user.loginName" />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="个性签名" :value="user.introduceSign" />
        </van-cell-group>
        <van-cell-group @click="goTo('order')">
          <van-cell title="我的订单"/>
        </van-cell-group>
        <van-cell-group @click="goTo('setting')">
          <van-cell title="账号管理" />
        </van-cell-group>
        <van-cell-group @click="goTo('address?from=mine')">
          <van-cell title="地址管理" />
        </van-cell-group>
        <van-cell-group @click="goTo('about')">
          <van-cell title="关于我们" />
        </van-cell-group>
    </div>
    
    
    <van-button type="danger" round  block @click="logout" class="btn">退出</van-button>

  </div>
</template>

<script>
    import {
        getUserInfo,
        logout
    } from '@/api/index';
    import {
        Dialog,
        Toast
    } from "vant";
    export default {
        data() {
            return {
                user: {},
                images: [
                    'https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                ],
                username: '名字',
                phone: '12434'
            }

        },
        created() {
            // this.user = JSON.parse(localStorage.getItem("userData"));
            // console.log(JSON.parse(localStorage.getItem("userData")))
        },
        async mounted() {
            const {
                data
            } = await getUserInfo();
            this.user = data;
        },
        methods: {
            onClickLeft() {
                this.$router.back()
            },
            onChange(index) {
                if (index == 'index') {
                    // window.location.href = './index.html'
                }
            },
            goTo(r) {
                this.$router.push({
                    path: r
                })
            },
            logout() {
                let that = this;
                // QC.Login.signOut()      //qq退出登录
                // this.$message.info('qq退出登录')
                Dialog.confirm({
                    title: '确认退出吗？'
                }).then(() => {
                    logout().then(res => {
                        if (res.resultCode == 200) {
                            Toast('退出成功')
                        }
                    })
                })
            }

        }
    }
</script>
<style lang='less' scoped>
    .user {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .userImage {
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #bdc1ca;
        }
        .userInfo {
            height: 50%;
            .van-cell__title {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                text-align: left;
            }
        }
        .btn {
            width: 80%;
            text-align: center;
            position: absolute;
            bottom: 100px;
            left: 10%;
        }
        .user-list {
            padding: 0 20px;
            margin-top: 20px;
            li {
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #e9e9e9;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                .van-icon-arrow {
                    margin-top: 13px;
                }
            }
        }
    }
</style>